import 'package:flutter/material.dart';
import 'package:wanandroid_flutter/api/common_service.dart';

import 'package:wanandroid_flutter/model/system_tree_model.dart';
import 'package:wanandroid_flutter/ui/system_tree_content_page.dart';

class SystemTreePage extends StatefulWidget {
  _SystemTreePageState createState() => _SystemTreePageState();
}

class _SystemTreePageState extends State<SystemTreePage>
    with AutomaticKeepAliveClientMixin {
  List<SystemTreeData> _datas = new List();

  void initState() {
    _getData();
    super.initState();
  }

  bool get wantKeepAlive => true;

  /// ==========================================================

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('知识体系'),
        elevation: 0.0,
      ),
      body: RefreshIndicator(
        onRefresh: _getData,
        child: ListView.separated(
          itemBuilder: _renderRow,
          separatorBuilder: (BuildContext context, int index) => Container(
                height: 0.5,
                color: Colors.black26,
              ),
          itemCount: _datas.length,
        ),
      ),
    );
  }

  Widget _renderRow(BuildContext context, int index) {
    if (index < _datas.length) {
      return InkWell(
        onTap: () => Navigator.of(context).push(
              MaterialPageRoute(
                builder: (context) =>
                    SystemTreeContentPage(data: _datas[index]),
              ),
            ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              child: Container(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  children: <Widget>[
                    Container(
                      alignment: Alignment.centerLeft,
                      padding: EdgeInsets.only(bottom: 8.0),
                      child: Text(
                        _datas[index].name,
                        style: TextStyle(fontSize: 16.0),
                        textAlign: TextAlign.left,
                      ),
                    ),
                    Container(
                      alignment: Alignment.centerLeft,
                      child: _buildChildren(_datas[index].children),
                    ),
                  ],
                ),
              ),
            ),
            Container(
              padding: const EdgeInsets.only(right: 16.0),
              child: Icon(
                Icons.chevron_right,
                size: 36.0,
                color: Colors.grey[400],
              ),
            ),
          ],
        ),
      );
    }

    return null;
  }

  Widget _buildChildren(List<SystemTreeChild> children) {
    List<Widget> tiles = [];

    for (var child in children) {
      tiles.add(Chip(
        label: Text(child.name),
      ));
    }

    return Wrap(
      spacing: 8.0,
      runSpacing: 4.0,
      alignment: WrapAlignment.start,
      children: tiles,
    );
  }

  /// ==========================================================

  Future<Null> _getData() async {
    CommonService().getSystemTree((SystemTreeModel systemTreeModel) {
      setState(() {
        _datas = systemTreeModel.data;
      });
    });
  }
}
